<template>
  <div>
    <div>
        <el-radio-group v-model="data.type">
            <el-radio :label="'device'">设备数据过滤</el-radio>
            <el-radio :label="'timeRange'">时间范围过滤</el-radio>
        </el-radio-group>
    </div>
    <div v-if="data.type=='device'">
      <el-row>
        <el-col :span="8"><el-button plain @click="openDeviceSelector" size="mini">选择设备:{{selectedDeviceName}}</el-button></el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
      <DeviceSelector v-if="showDeviceSelector" @deviceSelected="onDeviceSelected" :param="deviceParam"></DeviceSelector>
      <el-row>
        <el-col :span="2">
          条件:
        </el-col>
        <el-col :span="22">
           <el-row v-for="cond in data.conditions" :key="cond.identifier">
            <el-col :span="20">
              <FilterCondition :data="cond" :items="modelItems"></FilterCondition>
            </el-col>
            <el-col :span="4">
              <el-button plain @click="delCondition(cond)" size="mini">-</el-button>
            </el-col>
          </el-row>
          <el-button plain @click="addCondition" size="mini">+</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import DeviceSelector from '../device/DeviceSelector.vue'
  import FilterCondition from './FilterCondition.vue'
  import {
    GetThingModel,
  } from '../../api/productApi'
  import{GetDeviceByDn} from '@/api/deviceApi'
  export default {
    name: 'Filtera',
    props: {
     data:{
         type: Object,
         default: () => {
            return {
                type: 'device',
                conditions: []
            }
         }
     }
    },
    data() {
      return {
        showProductSelector: false,
        selectedDevice: {},
        showDeviceSelector: false,
        selectedDeviceName: '',
        modelItems: [],
        deviceParam: {},
      }
    },
    // 注册组件
    components: {
      DeviceSelector,
      FilterCondition
    },
    created() {
      this.init();
    },
    watch:{
      data(){
        this.init();
      }
    },
    methods: {
      init(){
        if(this.data.type=='device' && this.data.conditions.length>0){
          let pkDn= this.data.conditions[0].device.split('/');
          GetDeviceByDn(pkDn[0],pkDn[1]).then(res=>{
            this.selectedDeviceName=res.productKey+'/'+res.deviceName;
            this.getThingModel(res.productKey);
          })
        }
      },
      openDeviceSelector(){
          this.showDeviceSelector=!this.showDeviceSelector
      },
      onDeviceSelected(device){
        this.selectedDevice=device;
        this.selectedDeviceName=device.productKey+'/'+device.deviceName;
        this.showDeviceSelector=false;
        this.data.conditions.forEach(cond=>{
          cond.device=this.selectedDeviceName;
        })

        this.getThingModel(device.productKey);
      }, 
      getThingModel(pk) {
        this.loading = true
        GetThingModel(pk)
        .then(res => {
          this.initThingModel(res)
        })
      },
      initThingModel(res){
        this.modelItems=[];
        let items=[];
        this.modelItems.push({
          name: '属性',
          items: items
        });
        res.model.properties.forEach(p=>{
          items.push({
            type: 'property',
            identifier: p.identifier,
            name: p.name,
          })
        });

        this.modelItems.push({
          name: '状态',
          items: [
            {
              type: 'state',
              identifier: 'online',
              name: '是否在线'
            }
          ]
        });
      },
      addCondition(){
        this.data.conditions.push({
          id:Math.random(),
          device: this.selectedDeviceName
        });
      },
      delCondition(cond){
        let index= this.data.conditions.findIndex((c)=>{
          return  c.id==cond.id
        })
        this.data.conditions.splice(index,1);
      }
    }
  }
</script>

<style>
</style>
